<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" center title="宝贝详情" width="600px">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <a :href="commodity.link_url ? commodity.link_url[0].url : commodity.cover_url" style="color: #42b983" target="_blank">
            <img :src="commodity.link_url ? commodity.link_url[0].url : commodity.cover_url" alt="点击打开" class="el-avatar">
          </a>
          <div style="text-align:center;color:red">
            <span>￥{{ commodity.price }}元</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="padding-top:25%; line-height:25px">
          <div>
            <span>商品名称：</span>
            <span>{{ commodity.name }}</span>
          </div>
          <div>
            <span>产品名称：</span>
            <span>{{ commodity.pro_name }}</span>
          </div>
          <div>
            <span>类别名称：</span>
            <span>{{ commodity.variety_name }}</span>
          </div>
          <div>
            <span>专柜价格：</span>
            <span>{{ commodity.price }}</span>
          </div>
          <div>
            <span>会员价格：</span>
            <span>{{ commodity.vip_price }}</span>
          </div>
          <div>
            <span>库存限制：</span>
            <span>{{ commodity.inventory }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider />
    <el-button type="primary" size="small" style="display: flex;float: right;margin: -15px 10px 10px;" @click="cancel">关闭</el-button>
  </el-dialog>
</template>

<script>
export default {
  components: { },
  data() {
    return {
      dialog: false,
      commodity: '',
      form: {
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
.el-avatar{
  width: 250px;
  height: 250px;
}
</style>
